﻿@charset "utf-8";
@import "common/global";
@import "header";
@import "footer";
.main {
    width: 100%;
    background: $bgColor;
    .personal-info {
        background-color: #ffffff;
        width: 100%;
        height: 2.78rem;
        padding: 0 0.78rem;
        overflow: hidden;
        .ratio-bar {
            width: 100%;
            height: 0.3rem;
            border-radius: 50%;
            margin: 0.5rem auto;
            .amount-insurance {
                width: 100%;
                height: 100%;
                background-color: #f7c559;
                border-radius: 0.5rem;
                position: relative;
                .personal-insured {
                    width: 4.24rem;
                    height: 0.3rem;
                    position: absolute;
                    border-top-left-radius: 0.5rem;
                    border-bottom-left-radius: 0.5rem;
                    background-color: $diyColor;
                }
            }
        }
        .basic-info {
            .insure-info {
                margin-top:.15rem;
                .dot {
                    width: 0.12rem;
                    height: 0.12rem;
                    background-color: $diyColor;
                    border-radius: 50%;
                    margin: 0.6em .14rem 0 0;
                }
                .dot.dot-1{
                     background-color: #f7c559
                }
            }
        }
    }
    .insured-details {
        margin-top: 0.2rem;
        .details-cards {
            .card-item {
                margin-bottom: 0.18rem;
                padding: 0.55rem 0.28rem 0.56rem;
                background-color: #fff;
                .card-title {
                    width: 6.9rem;
                    font-size: 0.36rem;
                    color: #343434;
                    line-height: 1;
                    padding-bottom: 0.34rem;
                    .pre-sign {
                        background-color: $diyColor;
                        width: 0.09rem;
                        height: 0.3rem;
                        margin-top: 0.02rem;
                    }
                }
                .card-list {
                    padding-top: 0.6rem;
                    .card-cell {
                        &:nth-last-child(1){
                            padding-bottom: 0;
                            margin-bottom: 0;
                        }
                        margin-bottom: 0.56rem;
                        .title {
                            font-size: 0.3rem;
                            color: #585858;
                            line-height: 1;
                            text-align: left;
                            padding: 0 0.18rem;
                            .price {
                                font-size: 0.36rem;
                                color: #686868;
                                line-height: 1;
                                text-align: right;
                            }
                            .arrow {
                                width: 0.25rem;
                                height: 0.16rem;
                                margin: 0.1rem 0 0 0.22rem;
                                background-size: cover;
                            }
                            .arrow-down {
                                background-image: url(../../public/assets/images/arrow-down.png);
                            }
                            .arrow-up {
                                background-image: url(../../public/assets/images/arrow-up.png);
                            }
                        }
                        .card {
                            width: 100%; // height: 3.62rem;
                            background: #f4f4f4;
                            border: 0.02rem solid #e6e6e6;
                            margin: 0.4rem 0 0;
                            border-radius: 0.05rem;
                            padding: 0.4rem 0.22rem;
                            position: relative;
                            .btn-security {
                                width: 1.48rem;
                                height: 0.5rem;
                                background-image: url(../../public/assets/images/guarantee/btn-insecurity.png);
                                background-size: cover;
                                position: absolute;
                                right: 0.25rem;
                                top: 0.45rem;
                            }
                            .user-info {
                                .insured {
                                    line-height: 1;
                                    margin-bottom: 0.24rem;
                                }
                                .deadline {
                                    line-height: 1;
                                    padding-bottom: 0.44rem;
                                    border-bottom: 0.02rem dashed #dbdbdb;
                                }
                            }
                            .accidents {
                                margin-top: 0.24rem;
                                .accident {
                                    line-height: 1;
                                    margin-top: 0.24rem;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}